<template>
  <div>
    <el-card>
      <!-- 顶部操作栏 -->
      <div style="margin-bottom: 20px; display: flex; justify-content: space-between;">
        <el-button type="primary" @click="refresh">刷新库存</el-button>
        <el-input v-model="keyword" placeholder="搜索名称或编号" clearable @clear="fetchData"
          @keyup.enter.native="fetchData" style="width: 300px;" />
      </div>


      <el-table :data="stockList" style="width: 100%; margin-top: 20px;">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="chemicalName" label="药品名称" />
        <el-table-column prop="quantity" label="库存数量" />
        <el-table-column prop="lastUpdateTime" label="最后更新时间" />
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="pageSize"
        :page-sizes="[10, 20, 30, 100]" :current-page="page" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" style="margin-top: 20px; text-align: right;" />
    </el-card>
  </div>
</template>


<script>
import { listChemicalStock, getChemicalStockByChemicalId, saveChemicalStock } from '@/api/chemicalStock'

export default {
  name: 'ChemicalStockList',
  data() {
    return {
      stockList: [],
      pageSize: 10,
      page: 1,
      total: 1,
      keyword:''
    }
  },
  methods: {
    refresh(){
      this.keyword=''
      this.fetchData()
    },
    async fetchData() {
      const res = await listChemicalStock({ page: this.page, pageSize: this.pageSize, keyword:this.keyword })
      this.stockList = res.records
      this.total = res.total*1
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.page = val
      this.fetchData()
    },
    async getStockByChemicalId(chemicalId) {
      const res = await getChemicalStockByChemicalId(chemicalId)
      return res.data
    },
    async saveStock(stock) {
      const res = await saveChemicalStock(stock)
      if (res) {
        this.$message.success('库存保存成功')
        this.loadData()
      }
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>
